<template>
    <div id="system_site">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>消息推送</el-breadcrumb-item>
            <el-breadcrumb-item>客服消息</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-row :gutter="20">
                <el-col :span="this.$store.state.elColNum">
                    <el-form ref="form" :model="form" :label-width="this.$store.state.labelWidth" size="small">
                        <el-form-item label="任务名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                        <el-form-item label="图文选择">
                            <div class="image-text">
                                <div class="text">
                                    <span>{{form.title}}</span>
                                    <span class="el-icon-edit" @click="chooseText(1)" style="padding-right: 5px"></span>
                                    <img :src="form.pic" alt="" @click="chooseImg(1)">
                                </div>
                                <div class="text" v-for="(item,index) in titleList" :key="index">
                                    <span>{{item.title}}</span>
                                    <span class="el-icon-edit" @click="chooseText(2,index)"
                                          style="padding-right: 5px"></span>
                                    <span class="el-icon-delete-solid"
                                          @click="removeText(index)"></span>
                                    <p class="link" @click="linkShow(2,index)">
                                        <span v-if="item.url">{{item.url}}</span>
                                        <span v-else>链接未配置</span>
                                    </p>
                                    <img :src="item.pic"
                                         alt="" @click="chooseImg(2,index)">
                                    <div>
                                        <div v-html="item.content"></div>
                                        <el-button type="primary" size="small" @click="chooseContent(3,index)">配置内容
                                        </el-button>
                                    </div>

                                </div>
                                <div class="add" @click="addTitle"><span class="el-icon-plus"></span>添加次条</div>
                            </div>
                        </el-form-item>
                        <el-form-item label="接收用户">
                            <el-select v-model="form.is_all" placeholder="请选择">
                                <el-option label="全部用户" :value="0"></el-option>
                                <el-option label="按分类选择" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="" v-show="form.is_all==1">
                            <div class="class-choose">
                                <el-form-item label="性别：" label-width="100px">
                                    <el-radio v-model="form.sex" :label="0" @change="chooseClass">不限</el-radio>
                                    <el-radio v-model="form.sex" :label="1" @change="chooseClass">男</el-radio>
                                    <el-radio v-model="form.sex" :label="2" @change="chooseClass">女</el-radio>
                                    <el-radio v-model="form.sex" :label="3" @change="chooseClass">保密</el-radio>
                                </el-form-item>
                                <el-form-item label="充值情况：" label-width="100px">
                                    <el-radio v-model="form.charge" :label="0" @change="chooseClass">不限</el-radio>
                                    <el-radio v-model="form.charge" :label="1" @change="chooseClass">未充值用户</el-radio>
                                    <el-radio v-model="form.charge" :label="2" @change="chooseClass">已充值用户</el-radio>
                                </el-form-item>
                                <el-form-item label="阅读币剩余：" label-width="100px">
                                    <el-radio v-model="form.money" :label="0" @change="chooseClass">不限</el-radio>
                                    <el-radio v-model="form.money" :label="1" @change="chooseClass">低于500</el-radio>
                                    <el-radio v-model="form.money" :label="2" @change="chooseClass">低于2000</el-radio>
                                    <el-radio v-model="form.money" :label="3" @change="chooseClass">低于5000</el-radio>
                                </el-form-item>
                                <el-form-item label="关注时间：" label-width="100px">
                                    <el-radio v-model="form.join_time" :label="0" @change="chooseClass">不限</el-radio>
                                    <el-radio v-model="form.join_time" :label="1" @change="chooseClass">一天内</el-radio>
                                    <el-radio v-model="form.join_time" :label="2" @change="chooseClass">一周内</el-radio>
                                    <el-radio v-model="form.join_time" :label="3" @change="chooseClass">半个月内</el-radio>
                                    <el-radio v-model="form.join_time" :label="4" @change="chooseClass">一个月内</el-radio>
                                    <el-radio v-model="form.join_time" :label="5" @change="chooseClass">三个月内</el-radio>
                                    <el-radio v-model="form.join_time" :label="6" @change="chooseClass">更早</el-radio>
                                </el-form-item>
                                <div class="class-choose-bottom">
                                    符合条件的用户： 约 {{count}} 人
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item label="头条链接">
                            <el-input v-model="form.url"></el-input>
                            <span class="input_hint">用户点击客服消息后跳转到的网页链接消息描述</span>
                        </el-form-item>
                        <el-form-item label="内容:">
                            <quill-editor
                                    v-model="form.content"
                                    ref="myQuillEditor"
                                    :options="editorOption">
                            </quill-editor>
                        </el-form-item>
                        <el-form-item label="消息描述">
                            <el-input v-model="form.remark"></el-input>
                        </el-form-item>
                        <el-form-item label="发送时间">
                            <el-date-picker
                                    v-model="form.stime"
                                    type="datetime"
                                    value-format="timestamp"
                                    placeholder="选择日期时间">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="info" @click="later(10)">10分种后</el-button>
                            <el-button type="info" @click="later(30)">30分种后</el-button>
                            <el-button type="info" @click="later(60)">1小时后</el-button>
                            <el-button type="info" @click="later(120)">2小时后</el-button>
                            <el-button type="info" @click="later(180)">3小时后</el-button>
                        </el-form-item>

                        <el-form-item label="测试粉丝ID">
                            <el-col :span="15">
                                <el-input v-model="form.user_id"></el-input>
                            </el-col>
                            <el-button type="primary" @click="test">测试</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">保存</el-button>
                            <el-button type="primary" @click="$router.go(-1)" size="small">返回</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog title="选择标题" width="50%" :visible.sync="visible">
            <div class="title-box">
                <div class="title-box-item" @click="chooseTextList(index)" v-for="(item,index) in chooseTitleList"
                     :key="index">{{item.title}}
                </div>
            </div>
            <el-input v-model="freedom" placeholder="自填标题"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visible = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirm" size="small">确 定</el-button></span>
        </el-dialog>
        <el-dialog title="输入链接" width="50%" :visible.sync="visibleLink">
            <el-input v-model="url" placeholder="请输入链接"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visibleLink = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirmLink" size="small">确 定</el-button></span>
        </el-dialog>
        <el-dialog title="输入内容" width="50%" :visible.sync="visibleContent">
            <quill-editor
                    v-model="content"
                    ref="myQuillEditor"
                    :options="editorOption">
            </quill-editor>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visibleContent = false" size="small">取 消</el-button>
                <el-button type="primary" @click="dialogAffirmContent" size="small">确 定</el-button></span>
        </el-dialog>
        <el-dialog title="选择图片" width="50%" :visible.sync="visibleImg">
            <ul class="choose-img">
                <li v-for="(item,index) in imgList" :key="index" @click="chooseImage(item.pic)"><img :src="item.pic"
                                                                                                     alt=""></li>
            </ul>
            <span slot="footer" class="dialog-footer">
                <el-button @click="visibleImg = false" size="small">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  import quillConfigText from '../../utils/wx-quill-config'

  export default {
    name: "system_site",
    data() {
      return {
        form: {
          name: '',
          is_all: '',
          stime: '',
          user_id: '',
          sex: 0,
          charge: 0,
          money: 0,
          join_time: 0,
          title: '',
          pic: '',
          url: '',
          remark: '',
          info: [],
          content: '',
        },
        editorOption: quillConfigText,
        visible: false,
        visibleLink: false,
        visibleImg: false,
        visibleContent: false,
        titleList: [],
        imgList: [],
        chooseTitleList: [],
        radio: '1',
        value1: '',
        freedom: '',//自提标题
        count: '',
        type: '',
        index: '',
        url: '',
        content: '',
        id: '',
      }
    },
    created() {
      this.chooseClass();//分类人数
      this.getData();//图文列表数据
      this.id = this.$route.query.id;
      if (this.id) {
        this.getDetails(this.id);
      }
    },
    methods: {
      getData() {
        this.$axios.post('admin/custom/page_data').then((res) => {
          let data = res.data;
          this.chooseTitleList = data.titles;
          this.imgList = data.pics;
          this.form.title = this.chooseTitleList[0].title;
          this.form.pic = this.imgList[0].pic;
        });
      },
      onSubmit() {
        this.form.info = JSON.stringify(this.titleList);
        // let stime = this.form.stime.toString();
        this.form.stime = Number(new Date(this.form.stime) / 1000);
        if (this.id) {
          this.$axios.put('admin/custom/' + this.id, this.form).then((res) => {
            this.$message.success('成功');
            this.$router.history.go(-1)
          });
        } else {
          this.$axios.post('admin/custom', this.form).then((res) => {
            this.$message.success('成功');
            this.$router.history.go(-1)
          });
        }

      },
      chooseText(type, index) {
        this.visible = true;
        this.type = type;
        this.index = index;
      },
      dialogAffirm() {
        if (this.type == 1) {
          this.form.title = this.freedom;
        } else if (this.type == 2) {
          this.titleList[this.index].title = this.freedom
        }
        console.log(this.titleList);
        this.visible = false;
        this.freedom = '';
      },
      addTitle() {
        if (this.titleList.length == 0) {
          this.titleList.push(
            {
              title: this.chooseTitleList[1].title,
              url: '',
              pic: ''
            }
          );
          return false
        } else {
          this.titleList.push(
            {
              title: this.chooseTitleList[this.titleList.length + 1].title,
              url: '',
              pic: ''
            }
          );
          return false
        }
      },
      removeText(index) {
        this.titleList.splice(index, 1);
      },
      //选择时间
      later(Minutes) {
        this.getTime(Minutes);
      },
      getTime(Minutes) {
        var date = new Date();     //1. js获取当前时间
        var min = date.getMinutes();  //2. 获取当前分钟
        date.setMinutes(min + Minutes);  //3. 设置当前时间+10分钟：把当前分钟数+10后的值重新设置为date对象的分钟数
        // var y = date.getFullYear();
        // var m = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1);
        // var d = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate();
        // var h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours();
        // var f = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes();
        // var s = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds();
        // var formatdate = y + '-' + m + '-' + d + " " + h + ":" + f + ":" + s;
        this.form.stime = date
      },
      chooseTextList(index) {
        if (this.type == 1) {
          this.form.title = this.chooseTitleList[index].title;
        } else if (this.type == 2) {
          this.titleList[this.index].title = this.chooseTitleList[index].title
        }
        this.visible = false
      },
      dialogAffirmLink() {
        // if (this.type == 1) {
        //   // this.form.url = this.url;
        // } else if (this.type == 2) {
        //
        // }
        this.titleList[this.index].url = this.url;
        this.visibleLink = false;
        this.url = ''
      },

      dialogAffirmContent() {
        this.visibleContent = false;
        this.titleList[this.index].content = this.content;
        this.content = '';
      },

      linkShow(type, index) {
        this.visibleLink = true;
        this.type = type;
        this.index = index;
      },
      chooseContent(type, index) {
        this.visibleContent = true;
        this.type = type;
        this.index = index;
      },
      chooseImg(type, index) {
        this.visibleImg = true;
        this.type = type;
        this.index = index;
      },
      chooseImage(pic) {
        if (this.type == 1) {
          this.form.pic = pic;
        } else if (this.type == 2) {
          this.titleList[this.index].pic = pic;
        }
        this.visibleImg = false
      },
      // 选择分类
      chooseClass() {
        let data = {
          sex: this.form.sex,
          charge: this.form.charge,
          money: this.form.money,
          join_time: this.form.join_time
        };
        this.$axios.post('admin/custom/get_user_count', data).then((res) => {
          this.count = res.data.count
        });
      },
      getDetails(id) {
        this.$axios.get('admin/custom/' + id).then((res) => {
          this.form = res.data;
          this.form.stime = this.form.stime * 1000;
          this.titleList = JSON.parse(res.data.info);
        });
      },
      test() {
        this.form.info = JSON.stringify(this.titleList);
        console.log(this.form.info);
        let data = {
          user_id: this.form.user_id,
          info: this.form.info,
          title: this.form.title,
          remark: this.form.remark,
          pic: this.form.pic,
          url: this.form.url,
          content: this.form.content
        };
        this.$axios.post('admin/custom/send_test', data).then((res) => {
          this.$message.success('成功');
        });
      }
    }
  }
</script>

<style scoped lang="scss">
    .image-text {
        width: 100%;
        min-height: 100px;
        border: 1px solid #f2f2f2;
        padding: 20px 20px 0 20px;
        box-sizing: border-box;

        .text {
            background: #ffffff;
        }

        img {
            display: block;
            border: 1px solid #cccccc;
            width: 50px;
            height: 50px;
        }

        .link {
            color: red;
            cursor: pointer;
        }

        .add {
            cursor: pointer;
            font-weight: 700;
            text-align: center;
            border-top: 1px solid #f2f2f2;
            margin-top: 10px;
            line-height: 60px;
        }

        .el-icon-edit, .el-icon-delete-solid {
            cursor: pointer;
        }
    }

    .title-box {
        border: 1px solid #cccccc;
        border-bottom: none;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 20px;

        .title-box-item {
            padding: 0 20px;
            line-height: 50px;
            font-size: 14px;
            border-bottom: 1px solid #cccccc;
            cursor: pointer;
        }
    }

    .class-choose {
        height: 280px;
        background: #f2f2f2;
        padding: 20px;

        .class-choose-bottom {
            border-top: 1px solid #cccccc;
            line-height: 50px;
        }
    }

    .choose-img {
        display: flex;
        flex-wrap: wrap;
        /*justify-content: space-around;*/
        li {
            width: 120px;
            height: 80px;
            border: 1px solid #cccccc;
            margin: 10px;
            float: left;
            cursor: pointer;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
</style>